<template>
    <div class="element-from">
        <div class="background"></div>

        <div class="breadcrumb">
            <el-breadcrumb separatorClass="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>Element Form</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="buttons">
            <el-button @click="toClick">转换</el-button>
        </div>

        <div class="content">
            <el-input v-model="json" class="textarea" type="textarea" :rows="10"></el-input>
            <el-input v-model="table" class="textarea" type="textarea" :rows="10"></el-input>
            <el-input v-model="form" class="textarea" type="textarea" :rows="10"></el-input>
            <el-input v-model="rule" class="textarea" type="textarea" :rows="10"></el-input>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/5/15 10:45
     *
     *
     **/
    export default {
        name: 'AcElementForm',
        data() {
            return {
                json: '',
                table: '',
                form: '',
                rule: '',
            }
        },
        mounted() {
            this.$nextTick(() => {

            })
        },
        methods: {
            toClick() {
                const list = this.json.trim().split('\n');
                const items = [];
                list.forEach(s => {
                    const item = {};
                    if (s.split(':')[0].trim() === '') {
                        return;
                    }
                    item.key = s.split(':')[0].trim();
                    const annos = s.match(/\*(.+)\*/);
                    if (annos && annos[0])
                        item.anno = annos[0].replace(/\*/g, '').substring(0, 10);
                    items.push(item);
                });
                let table = '';
                let form = '';
                let rule = '';
                items.forEach(item => {
                    table += `<el-table-column prop="${item.key}" label="${item.anno ? item.anno : item.key}" align="center"></el-table-column>\n`;
                    form += `<el-form-item label="${item.anno ? item.anno : item.key}" prop="${item.key}" size="mini">
        <el-input class="input" v-model="{REPLACE}.${item.key}"></el-input>
      </el-form-item>\n`;
                    rule += `${item.key}: [{required: true, message: \'请输入${item.anno ? item.anno : item.key}\', trigger: \'blur\'}],\n`;
                });

                this.table = table;
                this.form = form;
                this.rule = rule;
            }
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    .element-from {
    }

    .background {
        position fixed
        top 0
        left 0
        z-index -999
        width 100%
        height 100%
        background-image url("../../assets/index/background.png")
        background-size cover
    }

    .breadcrumb {
        display flex
        justify-content space-between
        align-items center
        height 30px
        padding 20px
        background-color rgba(255, 255, 255, .3)
    }

    .buttons {
        width 95%
        margin 10px auto
        text-align right
    }

    .content {
        width 95%
        margin auto
        text-align center
    }

    .textarea {
        width 90%
        margin auto
    }
</style>
